<template>
  <el-inline-form ref="customInlineFormValidateRef" :model="formInline">
    <el-inline-form-item
      required
      prop="age"
      label="age"
      :rules="[
        { required: true, message: 'age is required' },
        { type: 'number', message: 'age must be a number', trigger: 'blur' },
      ]"
    >
      <el-input v-model.number="formInline.age" placeholder="age" clearable />
    </el-inline-form-item>
    <template #options>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </template>
  </el-inline-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'hive-plus'

const formInline = reactive({
  age: '',
})

const customInlineFormValidateRef = ref<FormInstance | undefined>()

const onSubmit = () => {
  customInlineFormValidateRef.value
    ?.instance()
    .validate()
    .then(() => {
      console.log('submit')
    })
    .catch(() => {
      console.log('error submit')
    })
}
</script>
